<template>
    <div class="main-container">
        <Portfolio></Portfolio>
        <Holdings></Holdings>
        <OpenTrades></OpenTrades>
        <ClosedTrades></ClosedTrades>
    </div>
</template>

<script setup>
import Portfolio from '@/components/pageunit/asset/Portfolio.vue';
import Holdings from '@/components/pageunit/asset/Holdings.vue';
import OpenTrades from '@/components/pageunit/asset/OpenTrades.vue';
import ClosedTrades from '@/components/pageunit/asset/ClosedTrades.vue';
</script>

<style scoped lang="less">
.main-container {
    box-sizing: border-box;
    width: 100%;
    min-height: calc(100vh - var(--nav-height) - var(--footer-height));
    padding: 1.5vw 11vw;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}
</style>